<template>
    <div>
        <div class="blog-up">
            <p class="blog-up-name">canvas粒子</p>
        </div>
        <div class="show-content">
            <div class="show-left">
                <h3><span>文章目录</span><i class="el-icon-close"></i></h3>
                <ul>
                    <li class="star"><i class="el-icon-star-off"></i>&nbsp;&nbsp;<a href="#first">前言</a></li>
                    <li class="star"><i class="el-icon-star-off"></i>&nbsp;&nbsp;<a href="#introduce">简单介绍</a></li>
                    <li class="liststar"><i class="el-icon-star-on"></i>&nbsp;&nbsp;<a href="#inform">通知功能实现</a></li>
                    <li class="liststar"><i class="el-icon-star-on"></i>&nbsp;&nbsp;<a href="#like">点赞功能</a></li>
                    <li class="liststar"><i class="el-icon-star-on"></i>&nbsp;&nbsp;<a href="#head">头像功能</a></li>
                    <li class="liststar"><i class="el-icon-star-on"></i>&nbsp;&nbsp;<a href="#observer">评论者重名</a></li>
                </ul>

               
            </div>
            <div class="show-right">
                <h1>canvas粒子</h1>
                <div class="times"><i class="el-icon-time">2020年9月23日</i><i class="el-icon-chat-dot-round" style="margin-left: 30px;">2</i></div>
                <div class="finishs">
                    <h3><a name="first">前言</a></h3>
                    <p>自己写了一个简单评论模块，实现下面的需求：点赞，回复，头像，通知等。</p>
                </div>
                <div class="finishs">
                    <h3><a name="introduce">简单介绍</a></h3>
                   
                </div>
                <div class="processs">
                    <h3><a name="inform">通知功能实现</a></h3>
                    <p>通知功能实现<br/>当有访问者评论后，会通过邮件通知评论者和站长。使用插件为nodemailer，尝试了gmail、126、163邮箱，最终决定了126邮箱，因为gmail的安全机制导致有时候有些邮件发不出去，而用163邮箱容易被放到邮箱的垃圾箱中。在这个项目中，我自己注册了一个公用的126邮箱供开发者使用来发送邮件，如果想要使用自己的邮箱来发送邮件，在配置nodemailer时会用到授权码，注意这个不是邮箱密码，可以到网上搜索设置授权码。<br>
                        但是，如果频繁使用126邮箱发送邮件到固定的邮箱中，超过一定次数会邮件会被放入接收者邮箱的垃圾箱中。解决方法：设置接受者邮箱的白名单为该126邮箱，添加该126邮箱为邮箱联系人。</p>
                </div>
                <div class="processs">
                    <h3><a name="like">点赞功能</a></h3>
                    <p>将访问者在每篇文章点赞的数量记录在客户端的浏览器localStorage中，如果不清除浏览器缓存，在下次同一个访问者访问的时候，会从浏览器中的localStorage读取点赞记录。</p>
                </div>
                <div class="processs">
                    <h3><a name="head">头像功能</a></h3>
                    <p>通过判断state.users来判断是站长还是访问者，从而设置不同的头像
</p>
                </div>
                <div class="processs">
                    <h3><a name="observer">评论者重名</a></h3>
                    <p>在提交评论的时候，会在后台鉴别该评论名字是否对应特定邮箱，如果数据库已有该评论者名字且邮箱不对应，则无法提交评论，防止评论者重名。
                    </p>
                </div>
                <div>
                    <Email></Email>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Email from '@/components/email'

export default {
    name:'show',
    components:{
        Email,
    }

}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: #fff;
    }

    .blog-up{
        background:url('../assets/sunset.jpg');
        height:570px;
        width:100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blog-up-name{
        margin: 0;
        color: #fff;
        font-size: 45px;
        font-family: 'Times New Roman';
    }
    .show-content{
        display: flex;
        background-color: black;
        color: #fff;
    }
    .show-left{
        width: 300px;
        text-align: left;
        margin-left: 32px;
        margin: 40px 20px 20px 10px;
    }
    .show-left h3 span{
        margin-right: 20px;
    }
    .show-left ul{
        color: #fff;
        list-style: none;
    }
    .show-left ul li{
        height: 30px;
        width: 190px;
    }
    .show-left h3{
        margin-bottom: 10px;
    }
    .star{
        margin-left:10px;
    }
    .liststar{
        margin-left: 30px;
        margin-top: 5px;
    }
    .show-right{
        width: 800px;
        text-align: left;
    }
    .show-right h1{
        text-align: center;
        margin-top: 70px;
    }
    .times{
        text-align: right;
    }
    .firsts{
        font-size: 25px;
        font-weight: 600;
        border-bottom: 2px solid #fff;
        padding: 20px 0 10px 0;
    }
    .codes{
        margin: 35px 0px 35px 0;
    }
    .codes p{
        margin-top: 10px;
        color: #e3eaf1;
    }
    .processs{

    }
    .processs h3{
        padding: 30px 0 10px 0;
    }
    .finishs{

    }
    .finishs h3{
        border-bottom: 2px solid;
        padding: 50px 0 15px 0;
    }
    .finishs p{
        padding-top: 25px;
    }
    pre{
        padding: 0.625rem 0.625rem;
        background: #474949;
        border-radius: 0.3125rem;
        overflow-x: auto;
        font-size: 18px;
        margin-top: 20px;
    }
    code{
        color: #93f0d8;
    }
    .hljs-comment{
        color: #8e908c;
    }
    .hljs-tag{
        color: darkturquoise;
    }
    .hljs-string{
        color: greenyellow;
    }
    .hljs-attribute {
        color: #eab700;
    }
    .hljs-number{
        color: #f5871f;
    }
    .hljs-keyword{
        color: #cf20ff;
    }
</style>